<template>
  <div style="margin: 20px">
    <el-card>
      <div style="margin-bottom: 10px; display: flex">
        <el-input class="w-50 m-2" style="width: 150px" placeholder="请输入关键词" v-model="form.keywords" />
        <el-button style="margin-left: 10px" type="primary" @click="getProjectList">关键词搜索</el-button>
        <el-button @click="openAddProjectDialogue">新建项目</el-button>
      </div>
      <el-table :data="state.tableData" :border="true" highlight-current-row>
        <el-table-column prop="id" label="ID" width="50" />
        <el-table-column prop="name" label="项目名称" width="150" />
        <el-table-column prop="description" label="项目描述" />
        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column fixed="right" label="操作" width="200">
          <template v-slot="scope">
            <el-button link size="small" @click="toSolutionView(scope.row)">查看方案</el-button>
            <el-button link size="small" @click="openEditProjectDialogue(scope.row)">编辑</el-button>
            <el-popconfirm title="是否确认删除该项？" confirm-button-text="是" cancel-button-text="否"
              @confirm="deleteProject(scope.row.id)">
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" v-model:current-page="form.current" v-model:page-size="form.size"
        :page-sizes="[10, 20, 50]" :small="false" :disabled="false" :background="true"
        layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
    <el-dialog v-model="dlgState.visible" :title="dlgState.title" :width="600" @close="cleanDialogue">
      <el-form :model="dlgState.form" ref="dlg_form">
        <el-form-item label="项目名称：" prop="name">
          <el-input v-model="dlgState.form.name"></el-input>
        </el-form-item>
        <el-form-item label="项目描述：" prop="description">
          <el-input v-model="dlgState.form.description" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialogue">返回</el-button>
          <el-button type="primary" @click="addProject" v-if="dlgState.isAdd">
            新增
          </el-button>
          <el-button type="primary" @click="editProject" v-else> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <el-button @click="test"></el-button>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import router from "@/router";
import projectApi from "@/api/evaluation/project";

export default {
  props: {
    projectType: {default : 1, type: Number}
  },
  data() {
    return {
      urlPrefix : "",
      form : reactive({
        current: 1,
        keywords: "",
        size: 10,
      }),
      state : reactive({
        total: 0,
        tableData: [],
      }),
      dlg_form : ref(),
      dlgState : reactive({
        visible: false,
        isAdd: true,
        title: "新增项目",
        form: {
          id: 0,
          name: "",
          projectType: this.projectType,
          description: "",
        }
      }),
      editForm : reactive({
        form: {
          name: "",
          projectType: 1,
          description: "",
        },
      })
    }
  },
  methods: {
    // 获取项目列表
    getProjectList() {
      projectApi.getProjects({ ...this.form, project_type: this.projectType}).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.state.tableData = res.data.data.records;
            this.state.total = res.data.data.total;
          }else {
            ElMessage.error(res.data.message)
          }
        }else {
          ElMessage.error("操作失败")
        }
      });
    },
    // 新增项目
    addProject(){
      projectApi.addProject(
          { ...this.dlgState.form, project_type: this.projectType }).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            ElMessage.success("添加成功");
            this.dlgState.visible = false;
            this.getProjectList();
          } else {
            ElMessage.error(res.data.message);
          }
        }else {
          ElMessage.error("操作失败")
        }
      });
    },
    editProject(){
      projectApi.editProject({ ...this.dlgState.form, project_type: this.project_type }).then((res) => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            ElMessage.success("保存成功");
            this.dlgState.visible = false;
            this.getProjectList();
          } else {
            ElMessage.error(res.data.message);
          }
        }else {
          ElMessage.error("操作失败")
        }
      });
    },
    // 项目删除
    deleteProject(id){
      projectApi.deleteProject(id).then((res) => {
        if (res.status === 200) {
          ElMessage.success("删除成功");
          this.getProjectList();
        }else {
          ElMessage.error("操作失败")
        }
      });
    },
    // 项目详情（方案视图）
    toSolutionView(project){
      console.log(project);
      window.sessionStorage.setItem(this.urlPrefix + "Project", JSON.stringify(project));
      console.log(window.sessionStorage.getItem(this.urlPrefix + "Project"));
      router.push("/" + this.urlPrefix +"/solution");
    },
    // 打开新增项目对话框
    openAddProjectDialogue(){
      this.dlgState.title = "新增项目"
      this.dlgState.isAdd = true;
      this.dlgState.visible = true;
    },
    openEditProjectDialogue(row){
      this.dlgState.form = row;
      this.dlgState.isAdd = false;
      this.dlgState.title = "编辑项目"
      this.dlgState.visible = true;
    },
    // 关闭新增项目对话框
    closeDialogue(){
      this.dlgState.visible = false;
    },
    // 清除对话框
    cleanDialogue(){
      this.dlgState.form = {
        id: 0,
        name: "",
        projectType: 1,
        description: "",
      };
    },
    // 调整分页大小
    handleSizeChange(val) {
      this.form.size = val;
      this.getProjectList();
    },
    // 跳转页面
    handleCurrentChange(val) {
      this.form.current = val;
      this.getProjectList();
    },

  },
  mounted() {
    if(this.projectType == 1){
      this.urlPrefix = "generic"
    } else if(this.projectType == 2){
      this.urlPrefix = "infrastructure"
    } else  if(this.projectType == 3){
      this.urlPrefix = "purchase"
    } else  if(this.projectType == 4){
      this.urlPrefix = "repair"
    } else  if(this.projectType == 5){
      this.urlPrefix = "update"
    }
    this.getProjectList();
  }
};
//
//
// // type definition
// type project = {
//   id: number;
//   name: string;
//   type: number;
//   createTime: Date;
//   description: string;
// }

</script>
<style lang="scss" scoped>
.tabs>.el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.tabs {
  margin: 20px;
}
</style>
